;(function(window, document, $, undefined){ $.swipebox=function(elem, options){ var ui, defaults={ useCSS:true, useSVG:true, initialIndexOnArray:0, removeBarsOnMobile:true, hideCloseButtonOnMobile:false, hideBarsDelay:3000, videoMaxWidth:1140, vimeoColor:'cccccc', beforeOpen: null, afterOpen: null, afterClose: null, afterMedia: null, nextSlide: null, prevSlide: null, loopAtEnd: false, autoplayVideos: false, queryStringData: {}, toggleClassOnLoad: '' }, plugin=this, elements=[], $elem, selector=elem.selector, isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i), isTouch=isMobile!==null||document.createTouch!==undefined||('ontouchstart' in window)||('onmsgesturechange' in window)||navigator.msMaxTouchPoints, supportSVG = !! document.createElementNS&&!! document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect, winWidth=window.innerWidth ? window.innerWidth:$(window).width(), winHeight=window.innerHeight ? window.innerHeight:$(window).height(), currentX=0, html='
\
\
\
\
\
\
\
\ \ \
\
\ \
\
'; plugin.settings={}; $.swipebox.close=function (){ ui.closeSlide(); }; $.swipebox.extend=function (){ return ui; }; plugin.init=function(){ plugin.settings=$.extend({}, defaults, options); if($.isArray(elem)){ elements=elem; ui.target=$(window); ui.init(plugin.settings.initialIndexOnArray); }else{ $(document).on('click', selector, function(event){ if(event.target.parentNode.className==='slide current'){ return false; } if(! $.isArray(elem)){ ui.destroy(); $elem=$(selector); ui.actions(); } elements=[]; var index, relType, relVal; if(! relVal){ relType='data-rel'; relVal=$(this).attr(relType); } if(! relVal){ relType='rel'; relVal=$(this).attr(relType); } if(relVal&&relVal!==''&&relVal!=='nofollow'){ $elem=$(selector).filter('[' + relType + '="' + relVal + '"]'); }else{ $elem=$(selector); } $elem.each(function(){ var title=null, href=null; if($(this).attr('title')){ title=$(this).attr('title'); } if($(this).attr('href')){ href=$(this).attr('href'); } elements.push({ href: href, title: title }); }); index=$elem.index($(this)); event.preventDefault(); event.stopPropagation(); ui.target=$(event.target); ui.init(index); }); }}; ui={ init:function(index){ if(plugin.settings.beforeOpen){ plugin.settings.beforeOpen(); } this.target.trigger('swipebox-start'); $.swipebox.isOpen=true; this.build(); this.openSlide(index); this.openMedia(index); this.preloadMedia(index+1); this.preloadMedia(index-1); if(plugin.settings.afterOpen){ plugin.settings.afterOpen(index); }}, build:function (){ var $this=this, bg; $('body').append(html); if(supportSVG&&plugin.settings.useSVG===true){ bg=$('#swipebox-close').css('background-image'); bg=bg.replace('png', 'svg'); $('#swipebox-prev, #swipebox-next, #swipebox-close').css({ 'background-image':bg }); } if(isMobile&&plugin.settings.removeBarsOnMobile){ $('#swipebox-bottom-bar, #swipebox-top-bar').remove(); } $.each(elements, function(){ $('#swipebox-slider').append('
'); }); $this.setDim(); $this.actions(); if(isTouch){ $this.gesture(); } $this.keyboard(); $this.animBars(); $this.resize(); }, setDim:function (){ var width, height, sliderCss={}; if('onorientationchange' in window){ window.addEventListener('orientationchange', function(){ if(window.orientation===0){ width=winWidth; height=winHeight; }else if(window.orientation===90||window.orientation===-90){ width=winHeight; height=winWidth; }}, false); }else{ width=window.innerWidth ? window.innerWidth:$(window).width(); height=window.innerHeight ? window.innerHeight:$(window).height(); } sliderCss={ width:width, height:height }; $('#swipebox-overlay').css(sliderCss); }, resize:function (){ var $this=this; $(window).resize(function(){ $this.setDim(); }).resize(); }, supportTransition:function (){ var prefixes='transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split(' '), i; for(i=0; i < prefixes.length; i++){ if(document.createElement('div').style[ prefixes[i] ]!==undefined){ return prefixes[i]; }} return false; }, doCssTrans:function (){ if(plugin.settings.useCSS&&this.supportTransition()){ return true; }}, gesture:function (){ var $this=this, index, hDistance, vDistance, hDistanceLast, vDistanceLast, hDistancePercent, vSwipe=false, hSwipe=false, hSwipMinDistance=10, vSwipMinDistance=50, startCoords={}, endCoords={}, bars=$('#swipebox-top-bar, #swipebox-bottom-bar'), slider=$('#swipebox-slider'); bars.addClass('visible-bars'); $this.setTimeout(); $('body').bind('touchstart', function(event){ $(this).addClass('touching'); index=$('#swipebox-slider .slide').index($('#swipebox-slider .slide.current')); endCoords=event.originalEvent.targetTouches[0]; startCoords.pageX=event.originalEvent.targetTouches[0].pageX; startCoords.pageY=event.originalEvent.targetTouches[0].pageY; $('#swipebox-slider').css({ '-webkit-transform':'translate3d(' + currentX +'%, 0, 0)', 'transform':'translate3d(' + currentX + '%, 0, 0)' }); $('.touching').bind('touchmove',function(event){ event.preventDefault(); event.stopPropagation(); endCoords=event.originalEvent.targetTouches[0]; if(! hSwipe){ vDistanceLast=vDistance; vDistance=endCoords.pageY - startCoords.pageY; if(Math.abs(vDistance) >=vSwipMinDistance||vSwipe){ var opacity=0.75 - Math.abs(vDistance) / slider.height(); slider.css({ 'top': vDistance + 'px' }); slider.css({ 'opacity': opacity }); vSwipe=true; }} hDistanceLast=hDistance; hDistance=endCoords.pageX - startCoords.pageX; hDistancePercent=hDistance * 100 / winWidth; if(! hSwipe&&! vSwipe&&Math.abs(hDistance) >=hSwipMinDistance){ $('#swipebox-slider').css({ '-webkit-transition':'', 'transition':'' }); hSwipe=true; } if(hSwipe){ if(0 < hDistance){ if(0===index){ $('#swipebox-overlay').addClass('leftSpringTouch'); }else{ $('#swipebox-overlay').removeClass('leftSpringTouch').removeClass('rightSpringTouch'); $('#swipebox-slider').css({ '-webkit-transform':'translate3d(' +(currentX + hDistancePercent) +'%, 0, 0)', 'transform':'translate3d(' +(currentX + hDistancePercent) + '%, 0, 0)' }); }}else if(0 > hDistance){ if(elements.length===index +1){ $('#swipebox-overlay').addClass('rightSpringTouch'); }else{ $('#swipebox-overlay').removeClass('leftSpringTouch').removeClass('rightSpringTouch'); $('#swipebox-slider').css({ '-webkit-transform':'translate3d(' +(currentX + hDistancePercent) +'%, 0, 0)', 'transform':'translate3d(' +(currentX + hDistancePercent) + '%, 0, 0)' }); }} }}); return false; }).bind('touchend',function(event){ event.preventDefault(); event.stopPropagation(); $('#swipebox-slider').css({ '-webkit-transition':'-webkit-transform 0.4s ease', 'transition':'transform 0.4s ease' }); vDistance=endCoords.pageY - startCoords.pageY; hDistance=endCoords.pageX - startCoords.pageX; hDistancePercent=hDistance*100/winWidth; if(vSwipe){ vSwipe=false; if(Math.abs(vDistance) >=2 * vSwipMinDistance&&Math.abs(vDistance) > Math.abs(vDistanceLast)){ var vOffset=vDistance > 0 ? slider.height():- slider.height(); slider.animate({ top: vOffset + 'px', 'opacity': 0 }, 300, function (){ $this.closeSlide(); }); }else{ slider.animate({ top: 0, 'opacity': 1 }, 300); }}else if(hSwipe){ hSwipe=false; if(hDistance >=hSwipMinDistance&&hDistance >=hDistanceLast){ $this.getPrev(); }else if(hDistance <=-hSwipMinDistance&&hDistance <=hDistanceLast){ $this.getNext(); }}else{ if(! bars.hasClass('visible-bars')){ $this.showBars(); $this.setTimeout(); }else{ $this.clearTimeout(); $this.hideBars(); }} $('#swipebox-slider').css({ '-webkit-transform':'translate3d(' + currentX + '%, 0, 0)', 'transform':'translate3d(' + currentX + '%, 0, 0)' }); $('#swipebox-overlay').removeClass('leftSpringTouch').removeClass('rightSpringTouch'); $('.touching').off('touchmove').removeClass('touching'); }); }, setTimeout: function (){ if(plugin.settings.hideBarsDelay > 0){ var $this=this; $this.clearTimeout(); $this.timeout=window.setTimeout(function(){ $this.hideBars(); }, plugin.settings.hideBarsDelay ); }}, clearTimeout: function (){ window.clearTimeout(this.timeout); this.timeout=null; }, showBars:function (){ var bars=$('#swipebox-top-bar, #swipebox-bottom-bar'); if(this.doCssTrans()){ bars.addClass('visible-bars'); }else{ $('#swipebox-top-bar').animate({ top:0 }, 500); $('#swipebox-bottom-bar').animate({ bottom:0 }, 500); setTimeout(function(){ bars.addClass('visible-bars'); }, 1000); }}, hideBars:function (){ var bars=$('#swipebox-top-bar, #swipebox-bottom-bar'); if(this.doCssTrans()){ bars.removeClass('visible-bars'); }else{ $('#swipebox-top-bar').animate({ top:'-50px' }, 500); $('#swipebox-bottom-bar').animate({ bottom:'-50px' }, 500); setTimeout(function(){ bars.removeClass('visible-bars'); }, 1000); }}, animBars:function (){ var $this=this, bars=$('#swipebox-top-bar, #swipebox-bottom-bar'); bars.addClass('visible-bars'); $this.setTimeout(); $('#swipebox-slider').click(function(){ if(! bars.hasClass('visible-bars')){ $this.showBars(); $this.setTimeout(); }}); $('#swipebox-bottom-bar').hover(function(){ $this.showBars(); bars.addClass('visible-bars'); $this.clearTimeout(); }, function(){ if(plugin.settings.hideBarsDelay > 0){ bars.removeClass('visible-bars'); $this.setTimeout(); }}); }, keyboard:function (){ var $this=this; $(window).bind('keyup', function(event){ event.preventDefault(); event.stopPropagation(); if(event.keyCode===37){ $this.getPrev(); }else if(event.keyCode===39){ $this.getNext(); }else if(event.keyCode===27){ $this.closeSlide(); }}); }, actions:function (){ var $this=this, action='touchend click'; if(elements.length < 2){ $('#swipebox-bottom-bar').hide(); if(undefined===elements[ 1 ]){ $('#swipebox-top-bar').hide(); }}else{ $('#swipebox-prev').bind(action, function(event){ event.preventDefault(); event.stopPropagation(); $this.getPrev(); $this.setTimeout(); }); $('#swipebox-next').bind(action, function(event){ event.preventDefault(); event.stopPropagation(); $this.getNext(); $this.setTimeout(); }); } $('#swipebox-close').bind(action, function(){ $this.closeSlide(); }); }, setSlide:function(index, isFirst){ isFirst=isFirst||false; var slider=$('#swipebox-slider'); currentX=-index*100; if(this.doCssTrans()){ slider.css({ '-webkit-transform':'translate3d(' + (-index*100)+'%, 0, 0)', 'transform':'translate3d(' + (-index*100)+'%, 0, 0)' }); }else{ slider.animate({ left:(-index*100)+'%' }); } $('#swipebox-slider .slide').removeClass('current'); $('#swipebox-slider .slide').eq(index).addClass('current'); this.setTitle(index); if(isFirst){ slider.fadeIn(); } $('#swipebox-prev, #swipebox-next').removeClass('disabled'); if(index===0){ $('#swipebox-prev').addClass('disabled'); }else if(index===elements.length - 1&&plugin.settings.loopAtEnd!==true){ $('#swipebox-next').addClass('disabled'); }}, openSlide:function(index){ $('html').addClass('swipebox-html'); if(isTouch){ $('html').addClass('swipebox-touch'); if(plugin.settings.hideCloseButtonOnMobile){ $('html').addClass('swipebox-no-close-button'); }}else{ $('html').addClass('swipebox-no-touch'); } $(window).trigger('resize'); this.setSlide(index, true); }, preloadMedia:function(index){ var $this=this, src=null; if(elements[ index ]!==undefined){ src=elements[ index ].href; } if(! $this.isVideo(src)){ setTimeout(function(){ $this.openMedia(index); }, 1000); }else{ $this.openMedia(index); }}, openMedia:function(index){ var $this=this, src, slide; if(elements[ index ]!==undefined){ src=elements[ index ].href; } if(index < 0||index >=elements.length){ return false; } slide=$('#swipebox-slider .slide').eq(index); if(! $this.isVideo(src)){ slide.addClass('slide-loading'); $this.loadMedia(src, function(){ slide.removeClass('slide-loading'); slide.html(this); if(plugin.settings.afterMedia){ plugin.settings.afterMedia(index); }}); }else{ slide.html($this.getVideo(src)); if(plugin.settings.afterMedia){ plugin.settings.afterMedia(index); }} }, setTitle:function(index){ var title=null; $('#swipebox-title').empty(); if(elements[ index ]!==undefined){ title=elements[ index ].title; } if(title){ $('#swipebox-top-bar').show(); $('#swipebox-title').append(title); }else{ $('#swipebox-top-bar').hide(); }}, isVideo:function(src){ if(src){ if(src.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/)||src.match(/vimeo\.com\/([0-9]*)/)||src.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/)){ return true; } if(src.toLowerCase().indexOf('swipeboxvideo=1') >=0){ return true; }} }, parseUri:function (uri, customData){ var a=document.createElement('a'), qs={}; a.href=decodeURIComponent(uri); if(a.search){ qs=JSON.parse('{"' + a.search.toLowerCase().replace('?','').replace(/&/g,'","').replace(/=/g,'":"') + '"}'); } if($.isPlainObject(customData)){ qs=$.extend(qs, customData, plugin.settings.queryStringData); } return $ .map(qs, function (val, key){ if(val&&val > ''){ return encodeURIComponent(key) + '=' + encodeURIComponent(val); }}) .join('&'); }, getVideo:function(url){ var iframe='', youtubeUrl=url.match(/((?:www\.)?youtube\.com|(?:www\.)?youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/), youtubeShortUrl=url.match(/(?:www\.)?youtu\.be\/([a-zA-Z0-9\-_]+)/), vimeoUrl=url.match(/(?:www\.)?vimeo\.com\/([0-9]*)/), qs=''; if(youtubeUrl||youtubeShortUrl){ if(youtubeShortUrl){ youtubeUrl=youtubeShortUrl; } qs=ui.parseUri(url, { 'autoplay':(plugin.settings.autoplayVideos ? '1':'0'), 'v':'' }); iframe=''; }else if(vimeoUrl){ qs=ui.parseUri(url, { 'autoplay':(plugin.settings.autoplayVideos ? '1':'0'), 'byline':'0', 'portrait':'0', 'color': plugin.settings.vimeoColor }); iframe=''; }else{ iframe=''; } return '
' + iframe + '
'; }, loadMedia:function(src, callback){ if(src.trim().indexOf('#')===0){ callback.call($('
', { 'class':'swipebox-inline-container' }) .append($(src) .clone() .toggleClass(plugin.settings.toggleClassOnLoad) ) ); }else{ if(! this.isVideo(src)){ var img=$('').on('load', function(){ callback.call(img); }); img.attr('src', src); }} }, getNext:function (){ var $this=this, src, index=$('#swipebox-slider .slide').index($('#swipebox-slider .slide.current')); if(index + 1 < elements.length){ src=$('#swipebox-slider .slide').eq(index).contents().find('iframe').attr('src'); $('#swipebox-slider .slide').eq(index).contents().find('iframe').attr('src', src); index++; $this.setSlide(index); $this.preloadMedia(index+1); if(plugin.settings.nextSlide){ plugin.settings.nextSlide(index); }}else{ if(plugin.settings.loopAtEnd===true){ src=$('#swipebox-slider .slide').eq(index).contents().find('iframe').attr('src'); $('#swipebox-slider .slide').eq(index).contents().find('iframe').attr('src', src); index=0; $this.preloadMedia(index); $this.setSlide(index); $this.preloadMedia(index + 1); if(plugin.settings.nextSlide){ plugin.settings.nextSlide(index); }}else{ $('#swipebox-overlay').addClass('rightSpring'); setTimeout(function(){ $('#swipebox-overlay').removeClass('rightSpring'); }, 500); }} }, getPrev:function (){ var index=$('#swipebox-slider .slide').index($('#swipebox-slider .slide.current')), src; if(index > 0){ src=$('#swipebox-slider .slide').eq(index).contents().find('iframe').attr('src'); $('#swipebox-slider .slide').eq(index).contents().find('iframe').attr('src', src); index--; this.setSlide(index); this.preloadMedia(index-1); if(plugin.settings.prevSlide){ plugin.settings.prevSlide(index); }}else{ $('#swipebox-overlay').addClass('leftSpring'); setTimeout(function(){ $('#swipebox-overlay').removeClass('leftSpring'); }, 500); }}, nextSlide:function(index){ }, prevSlide:function(index){ }, closeSlide:function (){ $('html').removeClass('swipebox-html'); $('html').removeClass('swipebox-touch'); $(window).trigger('resize'); this.destroy(); }, destroy:function (){ $(window).unbind('keyup'); $('body').unbind('touchstart'); $('body').unbind('touchmove'); $('body').unbind('touchend'); $('#swipebox-slider').unbind(); $('#swipebox-overlay').remove(); if(! $.isArray(elem)){ elem.removeData('_swipebox'); } if(this.target){ this.target.trigger('swipebox-destroy'); } $.swipebox.isOpen=false; if(plugin.settings.afterClose){ plugin.settings.afterClose(); }} }; plugin.init(); }; $.fn.swipebox=function(options){ if(! $.data(this, '_swipebox')){ var swipebox=new $.swipebox(this, options); this.data('_swipebox', swipebox); } return this.data('_swipebox'); };}(window, document, jQuery));